<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>修改个人信息</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
	<link rel="stylesheet" href="css/mobiscroll.custom-3.0.0-beta6.min.css">
	<script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/vue/vant.js"></script>
	<script src="js/mobiscroll.custom-3.0.0-beta6.min.js"></script>
	<style>
		.remark{
			font-size: 14px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102,102,102,1)
		}
		.width75{
			margin-left: 0.347rem;
			width: 75%;
		}
		.width75 textarea{
			width: 100%;
			border:1px solid #f3f3f3;
			padding: 0.1rem;
            outline: none;
			resize: none;
		}
		.upload {
			width: 1.44rem;
			display: block;
			height: 1.44rem !important;
			position: absolute;
			top: 11px;
			left: 50%;
			margin-left: -1rem;
			width: 2rem;
			height: 2rem;
			opacity: 0;
	}

	.input-file-box{
		padding-top: 0.3rem;
		/* border: 1px solid gray; */
		width: 1.5rem;
		height: 1.5rem;
		position: relative;
		text-align: center;
		border-radius: 8px;
		display: inline-block;
	}
	/*文字描述*/
	.input-file-box > img{
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		position: absolute;
		top: 0px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		color: gray;
	}
	/*input框*/
	.input-file-box #uploadfile{
		opacity: 0;
		width:1.5rem;
		height: 1.5rem;
		cursor: pointer;
	}
	#img-box{
		margin-top: 0.3rem;
		float: left;
	}
	#img-box img{
		display: inline-block;
		float:left;
	}
	.closes{
		position: relative;
		width: 2.5rem;
		height: 2.5rem;
		float: left;
		margin-right: 0.3rem;
	}
	.close{
		position: absolute;
		right:0rem;
		top: 0;
	}
	select option {
		direction: rtl;
	}
	</style>
</head>
<body>
	<div class="customer_type" id="app">
		<div>
			<div style="position: relative;" class="upload_img">
				<img :src="from.Picurl" onerror="this.src='images/tx.png'">
				
			</div>
			<table class="customer_type_table">
				<tbody>
					<tr class="clearfix">
						<td><span>会员姓名</span></td>
						<td>
							<input readonly="true" v-model="from.Username" type="text"  placeholder="请输入会员姓名" class="customername">
						</td>
                    </tr>
                    <tr class="clearfix">
                        <td><span>身份证号</span></td>
                        <td>
                            <input oninput = "value=value.replace(/[\W]/g,'')" maxlength="18" maxlength="11" type="text" v-model="from.Usernum" placeholder="请输入身份证号" class="customerphone">
                        </td>
                    </tr>
					<tr class="clearfix">
						<td><span>出生日期</span></td>
						<td>
                            <input id="ageds" ref="Birth"  type="text"  placeholder="请选择出生日期" class="customername">
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>会员性别</span></td>
						<td>
                            <select v-model="from.Sex" id="maintainersele">
                                <option v-for="item in Sex" :value="item.id">
                                    {{item.name}}
                                </option>
                            </select>
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>地址(省)</span></td>
						<td>
                            <select  v-model="Province" @click="getProvince(Province)" id="maintainersele" >
                                <option v-for="item in areainfo" :value="item.id" :label="item.area">
                                    {{item.area}}
                                </option>
                            </select>
						</td>
                    </tr>
                    <tr class="clearfix">
                        <td><span>地址(市)</span></td>
                        <td>
                            <select @click="getCity" v-model="City" id="maintainersele">
                                <option v-for="item in CityDate" :value="item.id" :label="item.area">
                                    {{item.area}}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr class="clearfix">
                        <td><span>地址(县)</span></td>
                        <td>
                            <select  v-model="County" id="maintainersele">
                                <option v-for="items in CountyDate" :value="items.id" :label="items.area">
                                    {{items.area}}
                                </option>
                            </select>
                        </td>
                    </tr>
					<tr class="clearfix">
						<td><span>详细地址</span></td>
						<td>
							<input type="text" v-model="from.Address" placeholder="请输入详细地址" class="customerphone">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="sub_btn_div saves textcenter" @click="save">
			<button>修改</button>
		</div>
	</div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
        Sex:[
			{
				name:'女',
				id:'0'
        	},
			{
				name:'男',
				id:'1'
        	},
		],
        from:{
			Picurl:''
		},
        vids:'',
        mPicurl:"images/tx.png",
        img:'',
        Province:'',
        areainfo:[],
        City:'',
        CityDate:[],
        County:'',
        CountyDate:[],
		picdate:'',
		isload:'1'
	},
	watch:{
		Province(newData,prevData){
			if(this.isload=='0'){

			}else{
				this.City=""
				this.County=""
				this.getCitys()
			}
		},
		City(newData,prevData){
			if(this.isload=='0'){

			}else{
				this.County=""
				this.getCountys()
			}
		},
		immediate: true
    },
    created(){
        this.getlists()
    },
    methods:{
        getlists(){
            this.vids=sessionStorage.getItem('Vid')
            getVs()
            axios.get('/mobileapi/member/user_other.php?act=userinfo').then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code != 200) {
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data
                        this.from=data.data
						this.Province=data.data.Province
                        this.areainfo=data.data.areainfo
						
						this.$refs.Birth.value=this.from.Birth
						this.$delete(this.from,'areainfo')
						if(this.Province!=''||this.Province!=null||this.Province!=undefined){
							this.City=data.data.City
							this.County=data.data.County
							this.CityDate=data.data.areainfo_s
							this.CountyDate=data.data.areainfo_x
							this.isload="0"
						}else{
							this.City=''
							this.County=''
							this.CityDate=''
							this.CountyDate=''
							this.isload="1"
						}
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        onchangeImgFun (e) {
            var file = e.target.files[0]
            console.log(file)
            // 获取图片的大小，做大小限制有用
            let imgSize = file.size
            console.log(imgSize)
            var _this = this // this指向问题，所以在外面先定义
            // 比如上传头像限制5M大小，这里获取的大小单位是b
            // base64方法 2
            var reader = new FileReader()
            reader.readAsDataURL(file) // 读出 base64
            reader.onloadend = function () {
                // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
                var dataURL = reader.result
                //console.log(dataURL)
				_this.from.Picurl=dataURL
				console.log()
                _this.imgStr = dataURL
				_this.picdate = dataURL
                // 下面逻辑处理
            }
        },
		//获取省市县所有数据
		getProvince(Province){
			console.log(Province)
			console.log(this.Province)
			this.City=""
			this.County=""
			this.isload='1'
			this.getCitys()
		},
		getCitys(){
			const params={
				id:this.Province
			}
			axios.get('/mobileapi/member/user_other.php?act=select_parent',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code != 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        data=data.data.data
						this.CityDate=data
						this.City=this.CityDate[0].id
						this.getCountys()
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
		},
		getCity(){
			this.isload='1'
			this.getCountys()
		},
		getCountys(){
			const params={
				id:this.City
			}
			axios.get('/mobileapi/member/user_other.php?act=select_parent',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code != 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
						this.CountyDate=data
						this.County=this.CountyDate[0].id
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
		},
		//提交编辑信息
		save(){
			this.from.Province=this.Province
			this.from.City=this.City
			this.from.County=this.County
			this.from.Birth=this.$refs.Birth.value
			let from=JSON.stringify(this.from)
			let sign=md5(from)
			const params={
				from:from,
				sign:sign,
				picdate:this.picdate
			}
			axios.post('/mobileapi/member/user_other.php?act=edit_userinfo',Qs.stringify(params)).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
						window.vant.Toast(msg);
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data
                       window.vant.Toast('修改成功');
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
		},
		aaa(){
			this.City="3"
			this.isHide=false
		}
    }
})
//日期插件
$('#ageds').mobiscroll().date({
    theme: 'mobiscroll',
    display: 'bottom',
    lang: 'zh',
    defaultValue:new Date('1990-06-15'),
    dateFormat: 'yy-mm-dd',
    startYear:1940,
    endYear:2019,
});    
</script>
</html>